<template>
  <div class="useinfo">
    <h3>员工基本信息</h3>
    <hr />
    <div>
      <div>
        <span>身份证号</span>
        <span v-text="useinfo.id"></span>
      </div>
      <div>
        <span>地址</span>
        <span v-text="useinfo.address"></span>
      </div>
      <div>
        <span>姓名</span>
        <span v-text="useinfo.name"></span>
      </div>
      <div>
        <span>邮件</span>
        <span v-text="useinfo.email"></span>
      </div>
      <div>
        <span>手机电话号</span>
        <span v-text="useinfo.phone"></span>
      </div>
      <div>
        <span>注册时间</span>
        <span v-text="useinfo.time"></span>
      </div>
      <div>
        <span>状态是否正常</span>
        <span v-text="useinfo.sex"></span>
      </div>
      <div>
        <span>分配状态（是否分配）</span>
        <span v-text="useinfo.sex1"></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
var route = useRoute();
var useinfo = ref({});
onMounted(() => {
  useinfo.value = route.query;
  console.log("基本信息", useinfo);
});
</script>

<style lang="scss" scoped>
.useinfo {
  > h3 {
    text-align: center;
    height: 100px;
    line-height: 60px;
  }
  > div {
    width: 100%;
    margin-top: 50px;
    > div {
      padding: 20px 0;
      > span {
        font-size: 14px;
        &:nth-child(1) {
          width: 150px;
          text-align: right;
          margin-right: 50px;
        }
      }
    }
  }
}
</style>